<template>
  <scroll-view scroll-y="" class="city-list">
    <view class="city-item" v-for="(city, index) in sortedCities" :key="index" @tap="onCityClick(city)">
      {{ city }}
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      cityNames: ['南宁', '桂林', '柳州', '梧州', '北海', '钦州', '百色', '河池', '来宾', '贺州', '崇左'],
      sortedCities: [], // 排序后的城市名称数组
    };
  },
  mounted() {
    this.sortCities();
  },
  methods: {
    // 排序城市名称数组
    sortCities() {
      this.sortedCities = this.cityNames.sort((a, b) => {
        return a.localeCompare(b, 'zh-Hans-CN', { sensitivity: 'accent' });
      });
    },
    // 城市点击事件处理函数
    onCityClick(city) {
      // 触发自定义事件，将城市名称传回父组件
      this.$emit('city-click', city);
    },
  },
};
</script>

<style scoped>
.city-list {
  padding: 10px;
  height:55vh;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

.city-item {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  display: block;
  border-bottom: 1px solid #e0e0e0;
}

.city-item:last-child {
  border-bottom: none;
}
</style>
